<!-- /**
** @descerpion:这是传统的饼图
 */ -->
<template>
  <!-- <div> -->
  <Echart
    id="centreLeft1Charttwo"
    :options="options"
    :height="nowheight"
    :width="nowwidth"
  />
  <!-- </div> -->
</template>

<script>
import Echart from "../../baseMain/index.vue";
export default {
  components: {
    Echart
  },
  props: {
    zhtitle: {
      type: String,
      default: () => ""
    },
    nowwidth: {
      type: String,
      default: () => "100%"
    },
    nowheight: {
      type: String,
      default: () => "100%"
    },
    cdata: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      options: {}
    };
  },
  watch: {
    cdata: {
      handler(newData) {
        console.log(newData, (newData.total || 0) - (newData.dataLow || 0));
        this.options = {
          backgroundColor: '#fff',
          title: [
            {
              text: '',
              top: 30,
              left: 30,
              textStyle: {
                color: '#35598d',
                fontSize: 18,
                fontWeight: 'normal'
              }
            }
          ],
          graphic: [
            {
              type: 'text',
              top: '45%',
              left: "center",
              style: {
                text: ((((newData.dataLow || 0) / (newData.total || 0)) * 100) || 0).toFixed(1) + "%",
                font: '30px "microsoft yahei"',
                textAlign: 'center',
                fill: '#4d71df'
              }
            }
          ],
          tooltip: {
            show: true,
            formatter: "{b} : {d}% <br/> {c} 只"
          },
          series: [
            {
              name: '',
              type: 'pie',
              center: ['50%', '50%'],
              radius: ['35%', '58%'],
              startAngle: 180, // 起始角度
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              // hoverAnimation: false,
              emphasis: false,
              data: [
                {
                  value: (newData.dataLow || 0),
                  name: '占比',
                  itemStyle: {
                    // normal: {
                    color: '#4e73de'
                    // }
                  }
                },
                {
                  name: '占比',
                  itemStyle: {
                    // normal: {
                    color: '#e6e9f0'
                    // }
                  },
                  value: ((newData.total || 0) - (newData.dataLow || 0)) || 1 // 总数减去当前项数(灰色占比)
                }
              ]
            }
          ]
        };

        if (this.zhtitle.length > 0) {
          this.options.title = {
            text: this.zhtitle,
            left: "center",
            textStyle: {
              fontSize: 16,
              // fontWeight:"blod",
              color: "#fff"
            }
          };
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
